/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { useCallback, useEffect, useState, useMemo } from "react";
import { connect } from "dva";
import { Form, DatePicker, Input, Button } from "antd";
import StandardTable from "@/components/StandardTable";
import moment from "moment";
import { Yzs } from "@/components/Select";

const FormItem = Form.Item;
const { RangePicker } = DatePicker;

const start_date = moment()
  .startOf("day")
  .subtract(6, "days");

const end_date = moment()
  .endOf("day")
  .subtract(0, "days");

const disabledDate = current =>
  current &&
  current >
    moment()
      .endOf("day")
      .subtract(0, "days");

const BlacklistScan = React.memo(props => {
  const { dispatch, form = {}, loading } = props;
  const { getFieldDecorator, validateFields } = form;

  const [currentPage, setPage] = useState(1);
  const [brandsMap, setBrandsMap] = useState({});
  const [tableData, setTableDta] = useState({
    list: [],
  });

  const getList = useCallback(
    page => {
      validateFields((err, fieldsValue) => {
        if (err) return;
        const { cm_id = "all", ...rest } = fieldsValue;
        const values = {
          page,
          cm_id,
          ...rest,
        };
        const { date } = fieldsValue;
        if (date) {
          values.date = date.map(d => moment(d).format("YYYY-MM-DD"));
          const [start, end] = values.date;
          values.start_date = start;
          values.end_date = end;
          delete values.date;
        } else {
          values.start_date = "";
          values.end_date = "";
        }
        dispatch({
          type: "blacklist/getBlackScanList",
          payload: {
            page,
            ...values,
          },
        }).then(res => {
          res && setTableDta(res);
        });
      });
    },
    [dispatch, validateFields]
  );

  const search = useCallback(
    e => {
      e.preventDefault();
      getList(1);
    },
    [getList]
  );

  const handleTableChange = useCallback(pagination => {
    const { current } = pagination;
    setPage(current);
  }, []);

  const columns = useMemo(
    () => [
      {
        title: "黑名单客户手机号",
        key: "black_phone",
        dataIndex: "black_phone",
        align: "center",
        width: 150,
      },
      {
        title: "单号",
        key: "waybill_no",
        dataIndex: "waybill_no",
        align: "center",
        width: 200,
      },
      {
        title: "品牌",
        key: "brand",
        dataIndex: "brand",
        align: "center",
        width: 150,
        render: brand => brandsMap[brand],
      },
      {
        title: "驿站名称",
        key: "cm_id",
        dataIndex: "inn_name",
        align: "center",
        width: 200,
      },
      {
        title: "扫描员手机号",
        key: "operator_phone",
        dataIndex: "operator_phone",
        align: "center",
        width: 200,
      },
      {
        title: "扫描时间",
        key: "create_at",
        dataIndex: "create_at",
        width: 250,
      },
    ],
    [brandsMap]
  );

  useEffect(
    () => {
      getList(currentPage);
      dispatch({
        type: "global/getBrandList",
      }).then((brandList = []) => {
        const obj = {};
        if (brandList.length > 0) {
          for (const { brand_en, brand } of brandList) {
            obj[brand_en] = brand;
          }
          setBrandsMap(obj);
        }
      });
    },
    [currentPage, getList, dispatch]
  );

  return (
    <div>
      <Form layout="inline" style={{ marginBottom: 24 }} onSubmit={search}>
        <FormItem>
          {getFieldDecorator("keywords", {
            initialValue: "",
          })(<Input allowClear style={{ width: 300 }} placeholder="输入单号/手机号搜索" />)}
        </FormItem>
        <FormItem>
          {getFieldDecorator("date", {
            initialValue: [moment(start_date), moment(end_date)],
          })(
            <RangePicker
              style={{ width: "280px" }}
              placeholder={["开始日期", "结束日期"]}
              disabledDate={disabledDate}
            />
          )}
        </FormItem>
        <FormItem>{getFieldDecorator("cm_id")(<Yzs allowClear />)}</FormItem>
        <FormItem>
          <Button type="primary" loading={loading} htmlType="submit">
            查询
          </Button>
        </FormItem>
      </Form>
      <StandardTable
        loading={loading}
        rowKey="id"
        scroll={{ x: 800 }}
        data={tableData}
        columns={columns}
        onChange={handleTableChange}
      />
    </div>
  );
});

export default connect(({ loading }) => ({
  loading: loading.effects["blacklist/getBlackScanList"],
}))(Form.create()(BlacklistScan));
